<template>
  <div class="home">
    <!-- 轮播图 - 推荐商品广告 -->
    <van-swipe class="banner" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in banners" :key="banner.id" @click="goToProduct(banner.productId)">
        <div class="banner-content">
          <img :src="banner.image" :alt="banner.title" />
          <div class="banner-overlay">
            <div class="banner-info">
              <h3 class="banner-title">{{ banner.title }}</h3>
              <p class="banner-subtitle">{{ banner.subtitle }}</p>
              <div class="banner-price">
                <span class="current-price">{{ banner.price }}</span>
                <span class="original-price">{{ banner.originalPrice }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>

    <!-- 分类导航 -->
    <van-grid :column-num="4" class="category-grid">
      <van-grid-item v-for="category in categories" :key="category.id" :icon="category.icon" :text="category.name" />
    </van-grid>

    <!-- 推荐商品 -->
    <div class="section">
      <div class="section-title">推荐商品</div>
      <div class="product-list">
        <div v-for="product in products" :key="product.id" class="product-item" @click="goToProduct(product.id)">
          <img :src="product.image" :alt="product.name" />
          <div class="product-info">
            <div class="product-name">{{ product.name }}</div>
            <div class="product-price">
              <span class="current-price">¥{{ product.groupBuyPrice }}</span>
              <span class="original-price">¥{{ product.originalPrice }}</span>
            </div>
            <div class="group-buy-info">
              <van-progress :percentage="product.progress" :show-pivot="false" />
              <span class="progress-text">已拼{{ product.soldShares }}/{{ product.totalShares }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

// 轮播图数据 - 推荐商品广告
const banners = ref<any[]>([])
// 商品数据
const products = ref<any[]>([])
// 分类数据（如需后端可再调整）
const categories = ref([
  { id: 1, name: '运动', icon: 'sports' },
  { id: 2, name: '健身', icon: 'fitness' },
  { id: 3, name: '餐饮', icon: 'food' },
  { id: 4, name: '娱乐', icon: 'entertainment' }
])

// 跳转到商品详情
const goToProduct = (id: number) => {
  router.push(`/product/${id}`)
}

// 获取banner
const fetchBanners = async () => {
  try {
    const res = await fetch('/api/banners')
    if (!res.ok) throw new Error('获取banner失败')
    banners.value = await res.json()
  } catch (e) {
    showToast('获取banner失败')
  }
}

// 获取商品列表
const fetchProducts = async () => {
  try {
    const res = await fetch('/api/products')
    if (!res.ok) throw new Error('获取商品失败')
    products.value = await res.json()
  } catch (e) {
    showToast('获取商品失败')
  }
}

onMounted(() => {
  fetchBanners()
  fetchProducts()
})
</script>

<style scoped>
.home {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px; /* 额外底部边距，确保内容不被tabbar遮挡 */
}

.banner {
  height: 200px;
}

.banner-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 20px;
  color: white;
}

.banner-info {
  text-align: left;
}

.banner-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: bold;
}

.banner-subtitle {
  margin: 0 0 10px 0;
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.4;
}

.banner-price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.banner-price .current-price {
  font-size: 16px;
  font-weight: bold;
  color: #ff6b6b;
}

.banner-price .original-price {
  font-size: 12px;
  text-decoration: line-through;
  opacity: 0.7;
}

.category-grid {
  background: white;
  margin: 10px 0;
}

.section {
  background: white;
  margin: 10px 0;
  padding: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-item {
  display: flex;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-item img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.product-info {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.product-price {
  margin-bottom: 8px;
}

.current-price {
  color: #ff6b6b;
  font-size: 18px;
  font-weight: bold;
}

.original-price {
  color: #999;
  text-decoration: line-through;
  margin-left: 8px;
}

.group-buy-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-text {
  font-size: 12px;
  color: #666;
}
</style> 